<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="css/Admin_Search.css">

</head>
<body>

<div class="page-header">
    <h1>欢迎进入管理员查询系统</h1>
</div>


<div class="menu-container">
    <ul class="nav_nav-pills">
        <li role="销售总揽"><a href="Administrators_package.html">销售总揽</a></li>
        <li role="详细查询"><a href="Administrators_packageinformation.html">详细查询</a></li>
        <li role="返回主页"><a href="Administrators_Base.html">返回主页</a></li>
    </ul>
</div>

<div class="Search">

    <div class="input-group_input-group-lg">
        <ul class="elem">
            <li>搜索</li>
            <span>套餐Id</span>
            <input type="text" class="form-control" id="packageId" placeholder="请输入套餐Id" aria-describedby="sizing-addon1" >
            <button onclick="displayAllPackages()" type="button" class="form-control_button">点击查询</button>
        </ul>
    </div>


</div>


<div id="userDetails" class="user-details"></div>

<div id="packageList"></div>

<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script>
    function displayAllPackages() {
        var packageId = document.getElementById("packageId").value;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/Allpackageinformation?packageId=" + packageId , true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var packageId = JSON.parse(xhr.responseText);
                displayWorkerDetails(packageId);
            } else if (xhr.readyState == 4 && xhr.status == 404) {
                alert("falied");
            }
        };
        xhr.send();
    }

    function displayWorkerDetails(packageId) {

        var packageList = document.getElementById("packageList");
        packageList.innerHTML =
            "套餐ID：" + packageId.packageId + "<br/>" +"<br/>"+
            "套餐名字：" + packageId.packageName + "<br/>" +"<br/>"+
            "套餐价格：" + packageId.packagePrice + "<br/>" +"<br/>"+
            "套餐描述：" + packageId.packageDescription + "<br/>" +"<br/>"+
            "套餐时限：" + packageId.packageDataLimit ;
    }
</script>
</body>
</html>